﻿<template>
    <div class="first_view_cover" v-on:click.self="first_view_cover_f">
      <div class="first_view">
        <!--header s-->
        <div class="first_view_header">
          <img src="../../static/img/img_first_img.png" class="img_first_img dis_in_b">
          <ul class="dis_in_b uL_list">
            <li class="list_scccess">
              登陆成功！
            </li>
            <li class="list_get_s">
              恭喜获得<span class="list_point">1000</span>积分
            </li>
          </ul>
          <img src="../../static/img/wenhao_img.png" class="wenhao_img dis_in_b">
        </div>
        <!--header e-->
        <!--first_view_tips s-->
        <div class="first_view_tips">
          温馨提示：只有填写了学校，我们才能把您
          校友相关的资料和信息展现给您，否则可能
          会是一片空白。
        </div>
        <!--first_view_tips e-->
        <input type="text" class="input_base input_top" placeholder="填写学校（必填）" v-on:click="show_school" ref="school_get">
        <input type="text" class="input_base input_top" placeholder="笔名（可以修改）" ref="penname">
        <div class="first_view_bottom clearfix">
          <div class="first_view_bottom_sex" v-on:click="first_view_bottom_sex" ref="xz_el">
            {{CheckInput.sex_w}}
          </div>
          <div class="first_view_bottom_xz" v-on:click="first_view_bottom_xz" ref="sex_el">
            {{CheckInput.xz_w}}
          </div>
        </div>
        <div class="first_view_bottom_cirle" v-on:click="first_view_img" v-show="add_sign">
            添加图像
        </div>
        <img :src="show_b_img_data" alt="" v-show="!add_sign" class="first_view_bottom_cirle">
        <div class="first_view_bottom_btn_cover clearfix">
          <div v-on:click="next_close">
            下次再填
          </div>
          <div v-on:click="certain_btn">
            确认
          </div>
        </div>
      </div>
      <mt-actionsheet :actions="actions"
                      v-model="sheetVisible" ref="el">
      </mt-actionsheet>
      <mt-popup v-model="popupVisible"
                position="bottom" ref="el2" v-on:scroll="scroll_limit" v-on:click="close_popup">
        <div class="close_btn" v-on:click="close_btn_c">确定</div>
        <mt-picker :slots="slots" @change="onValuesChange" v-model="popupVisible" class="thom_picker">
        </mt-picker>
      </mt-popup>

      <mt-popup v-model="popupVisible3" position="right" class="mint-popup-3 pop_wraper" :modal="false">
        <input class="input_base pop_search" placeholder="输入学校"
               v-on:input="seach($event)" ref="search_vale"
               v-focus_ud:value='popupVisible3'
               v-t_focus
        />
        <div class="wrap_show_search_box">
          <div class="show_search_box" v-for="info in menu_list" v-on:click.self="change_address($event,info.id)">
            {{info.schoolName}}
            <div v-if="(info.length == 0)">
              没有匹配的消息
            </div>
          </div>
        </div>

        <mt-button @click.native="popupVisible3 = false" size="large" type="primary" class="close_pop">返回</mt-button>
       </mt-popup>
      <input type="file" ref="file" style="display: none">
    </div>
</template>
<script>
  import MintUI from 'mint-ui';
  import Vue from "vue";
  import '../../static/css/mint-ui/style.css';
  import common from "../common/common.js";
  import qs from 'qs';
  import axios from 'axios';
  import "../directive/directive.js";
  import check_input from "../common/check_input/check_input.js";
  import { Toast, Actionsheet, Picker, Indicator, MessageBox,Popup} from 'mint-ui';
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  Vue.prototype.$http = axios;

export default {
  name: 'hello',
  mixins:[check_input],
  data () {
    return {
      CheckInput:{
        sex_w:"性别",
        xz_w:"星座",
      },
      have_user_id: false,
      login_hidden_data:false,
      popupVisible:false,
      popupVisible_2:false,
      xz:"星座",
      slots: [
        {
          flex: 1,
          values: ['白羊座',
            '金牛座',
            '双子座',
            '巨蟹座',
            '狮子座',
            '处女座',
            '天平座',
            '天蝎座',
            '射手座',
            '摩羯座',
            '天平座',
            '双鱼座'
          ],
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }
      ],
      sheetVisible:false,
      picker_value:'',
      show_b_img_data:"",
      add_sign:true,
      popupVisible3:false,
      menu_list:"",
      sex_n:"",
      school_id:""
    }
  },
  beforeDestroy:function(){
    let foot_m = document.getElementsByClassName("index_bottom_f_m")[0];
    foot_m.style.zIndex = 1900;
  },
  mounted: function () {
    let foot_m = document.getElementsByClassName("index_bottom_f_m")[0];
    foot_m.style.zIndex = 100;
    common.this_fix(this,[Indicator]);
    common.get_img(this,()=>{
      this.add_sign=false
    });
    this.actions = [{
      name: '男',
      method: this.take_man
    }, {
      name: '女',
      method: this.take_g
    }];
    this.picker_value = "双子座";
  },
  methods: {
    first_view_cover_f:function(){
        common.go_back_none_btn();
   },
    next_close:function () {
      common.go_back_none_btn();
    },
    up_load_img: function () {
      Indicator.open();
      let  formData = new FormData();
      console.log(this.$refs.file.files[0]);
      formData.append("files",this.$refs.file.files[0]);
      this.$http.post('/yizhiweimen/api/user/activity/upload',
        formData)
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
          Indicator.close()
        }).then((e) => {
          this.certain_btn(e.data);
        })
    },
    certain_btn: async function(url){
      let user_id = common.get_user_id_url();
      //upload_img undefined
      let file =this.$refs.file.files[0];
      if(file === undefined){
          Toast({
            message: '没有添加图片',
            position: 'bottom',
            duration: 2000
          });
          return;
      }

      let  formData = new FormData();
      formData.append("files",this.$refs.file.files[0]);
      let com_file = await  common.up_load_file(this,formData).then((e)=>{
          return e
      });
      this.$http.post('/yizhiweimen/api/user/submitSet',
        qs.stringify(
          {
            id:user_id,
            penName:this.$refs.penname.value,
            sex:this.sex_n,
            constellation:this.picker_value,
            'image':com_file.data.fileUrl,
            'school.id':this.school_id
          }))
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
          Indicator.close()
        }).then((e) => {
        Toast({
          message: '成功',
          position: 'bottom',
          duration: 2000
        });
        this.next_close();
        Indicator.close();
      })
    },
    change_address:function ($el,id) {
        this.school_id = id;
        this.$refs.school_get.value = $el.target.innerText;
        this.popupVisible3=false;
    },
    show_school:function () {
        this.popupVisible3=true;
    },
    first_view_img:function () {
       this.$refs.file.click();
    },
    seach: function (e) {
      if (e.target.value === ""){
          this.menu_list = "";
          this.isloading = false;
          return;
      }
      this.isloading = false;
      this.$http.post('/yizhiweimen/api/user/school/getSchoolByName',
        qs.stringify(
          {
            name: e.target.value,
          }))
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
          this.isloading = false;
        }).then((e) => {
        if(e.data.length === 0){

        }
        this.menu_list = e.data;
        this.isloading = false;
      })
    },
    take_man:function () {
      this.$refs.xz_el.innerText = "男";
      this.sex_n = "男";
    },
    take_g:function () {
      this.$refs.xz_el.innerText = "女";
      this.sex_n = "女";
    },
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
      this.picker_value = values[0];
    },
    close_btn_c:function () {
      this.popupVisible = false;
      this.$refs.sex_el.innerText = this.picker_value;
    },
    close_popup:function () {
      this.popupVisible = false;
    },
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
      this.picker_value = values[0];
    },
    first_view_bottom_sex:function () {
      this.sheetVisible= true;
    },
    first_view_bottom_xz:function () {
      this.popupVisible = true
    }
   },
  components: {

  },
  created:function () {
    this.$store.commit("change_first_view_state",false);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
  @import "./sass/first_view.scss";
</style>


